<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>源辰-零食网商品详细</title>
<meta name="keywords" content="小吃,美食,零食,源辰" />
<meta name="description" content="各种小吃美食，应有尽有" />
<link href="images/yc.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/detail.css" type="text/css" >
</head>

<body>
<!-- 顶部区域 -->
<header id="header">
	<div class="header_title">
		<a href="#" target="_blank" class="location">衡阳</a>
		
		<div class="header_info">
			<div class="login_info">
				<a v-if="checkLogin" href="front/user.html" target="_blank" title="点击登录" >您好，[{{user.nickName}}]</a>
				<a v-else href="front/login.htnl" target="_blank" title="点击登录" >您好,请先登录</a>
				<a href="front/register.html" target="_blank" title="点击注册">免费注册</a>
			</div>
			
			<div class="person_info">
				<span>|</span>
				<a href="front/order.html" target="_blank" href="order.html">我的订单</a>
				<span>|</span>
				<a href="" target="_blank">我的收藏</a>
				<span>|</span>
				<a href="" target="_blank">客服服务</a>
				<span>|</span>
				<a href="user.html" target="_blank">个人信息</a>
			</div>
		</div>
	</div>
	
	<!-- 搜索区域  -->
	<div class="search">
		<div class="search_left">
			<a href="index.html" title="首页">
				<img src="images/logo.png" />
			</a>
			
		</div>
		
		<div class="search_center">
			<div class="search_div">
				<input type="search" placeholder="请输入您要搜索的内容..." />
				<input type="button" value="搜  索" />
			</div>
		</div>
		
		<div class="search_right">
			<i>{{count}}</i>
			<a href="front/cart.html" target="_blank">我的购物车</a>
		</div>
	</div>
	
	<!-- 类型导航 -->
	<div class="nav">
		<a href="javascript:void(0)" :class="{selected: tno == ''}" @click="findByType('')">全部</a>
		<a :class="{selected: tno == item.tno}" v-for="item in types" href="javascript:void(0)" 
			@click="findByType(item.tno)">{{item.tname}}</a>
	</div>
	
	<div class="v_nav">
		<ul>
			<li v-for="item in types" @click="findByType(item.tno)">
				<img :src="'../' + item.pic" />
				<span :class="{selected: tno == item.tno}">{{item.tname}}</span>
			</li>
		</ul>
	</div>
</header>
     
<!-- 面包屑导航 --> 
<div id="app">
	<div class="breadcrumb" id="breadcrumb">
			<a href="javascript:void(0)">全部分类</a>
			<span>&gt;</span>
			<a href="javascript:void(0)" id="goods_type">{{product.pname}}</a>
			<span>&gt;</span>
			<a href="javascript:void(0)">商品详情</a>
		</div>
		
		<!-- 商品展示 -->
		<div class="goods_details_con clearfix">
			<div class="goods_details_pic fl" id="product_imgs">
				<img v-for="item in pics" :src="'../' + item">
			</div>
			
			<div class="goods_details_list fr">
				<h3>{{product.pname}}</h3>
				<p>{{product.intro}}</p>
				<div class="price_bar">
					<span class="show_price">&yen;<em>{{product.price}}</em></span>
					<span class="show_unit">单位<em>{{product.weight}}</em></span>
				</div>
				<div class="goods_num clearfix">
					<span class="num_name fl">数量：</span>
					<div class="num_add fl">
						<input type="text" class="num_show fl" v-model="count" id="goods_count">
						<a href="javascript:addCount(1)" class="add fr" @click="addCount(1)">+</a>
						<a href="javascript:addCount(-1)" class="minus fr" @click="addCount(-1)">-</a>
					</div>
					<div class="balance_cls">仓库量<span id="store_num">{{product.balance}}</span>{{product.unit}}</div>
				</div>
				<div class="total">总价：<em v-html="(product.price * count).toFixed(2)"></em>元</div>
				<div class="operate_btn">
					<a href="javascript:;" class="buy_btn" id="buy_btn">立即购买</a>
					<a href="javascript:void(0);" class="add_cart" id="add_cart" @click="addCart()">加入购物车</a>
				</div>
			</div>
		</div>
	
	<!-- 商品详情 -->
	<div class="main_wrap clearfix">
	    <div class="l_wrap fl clearfix">
	        <div class="new_goods">
	            <h3>新品推荐</h3>
	            <ul>
	                <li>
	                    <a href="#"><img src="images/goods/good01.jpg"></a>
	                    <h4><a href="#">零食大礼包</a></h4>
	                    <div class="prize">&yen;3.90</div>
	                </li>
	                <li>
	                    <a href="#"><img src="images/goods/good02.jpg"></a>
	                    <h4><a href="#">多味泡泡糖</a></h4>
	                    <div class="prize">&yen;16.80</div>
	                </li>
	            </ul>
	        </div>
	    </div>
	
	    <div class="r_wrap fr clearfix">
	        <ul class="detail_tab clearfix">
	            <li class="active">商品介绍</li>
	            <li>评论</li>
	            <li>推荐</li>
	        </ul>
	
	        <div class="tab_content">
	            <dl>
	                <dt>商品详情：</dt>
	                <dd v-html="product.descr"> </dd>
	            </dl>
	        </div>
	    </div>
	</div>
</div>  
<!-- 版权所有 -->
<footer>
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2019 <a class="copy" href="http://www.hyycinfo.com" target="_blank">衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
    <p>电话：0734-8355998 湘ICP备16015987号-1</p>
</footer>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/show-dialog.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/hander.js"></script>
<script>
let app = new Vue({
	el: "#app",
	data: {
		product: {},
		count: 1,
		pics: [],
		pno:""
	},
	mounted: function() {
		let pno = location.search.replace("?", "");
		console.info(pno);
		if(!pno){
			location.href="index.html";
			return;
		}
		this.pno= pno;
		axios.post("pd/findByPno", qs.stringify({pno: pno})).then(rt => {
			if(rt.status == 200 && rt.data.code == 200){
				this.product = rt.data.data;
				this.pics = this.product.pics.split(";");
				this.$nextTick(() => {
					showpic();
				})			
				return;
			}
			this.product = {}
		})
	},
	methods: {
		addCount: function(num) {
			if(num == 1 && this.count >= this.product.balance) {
				return;
			}
			
			if(num == -1 && this.count == 1){
				return;
			}
			
			this.count = this.count + num;
		},
		
		addCart: function() {
			if(!header.$data.checkLogin){
				showmsg("请先登录...", "blue", function(){location.href="login.html"});
				return;
			}
			
			let carts = header.$data.carts;//获取购物车数据
			if(carts && carts.length > 0){
				for(let i = 0, len = carts.length; i < len; ++i){
					if(carts[i].pno == this.pno){
						axios.post("cart/update", qs.stringify({cno: carts[i].cno, num: this.count})).then( rt => {
						if(rt.status == 200 && rt.data.code == 200 ){
							carts[i].num = carts[i].num + this.count;//更新前端对象
							header.$data.carts[i] = carts[i];
							showmsg("加入购物车成功...", 'green');
							return;
						}
					})
					return;
				}
			}
		}
	
		//说明购物车没有
		axios.post("cart/add", qs.stringify({pno: this.pno, num: this.count})).then( rt => {
			if(rt.status == 200 && rt.data.code == 200)	{
				let obj = {};
				obj.cno = rt.data.data;
				obj.pno = this.pno;
				obj.num = this.count;
				obj.mno = header.$data.user.mno;
				header.$data.carts.push(obj);
				showmsg("加入购物车成功...", "green");
				return;
			}
			showmsg("加入购物车失败...", "red");
			})
		}
	}
})

function showpic(){
	let imgLen = $("#product_imgs img").length;
	if(imgLen > 1){
		let i = 0;
		setInterval(() => {
			$("#product_imgs img").css("display", "none");
			$("#product_imgs img").eq(i).css("display", "block");
			i = (i + 1) % imgLen;
		}, 2000);
	}
}
function addCount(num) {
	var nums = parseInt($("#goods_count").val());
	var store_num = parseInt($("#store_num").val());
	nums += parseInt(num);
	if (nums <= 0) {
		$("#goods_count").val(1);
		return;
	}
	
	if (nums > store_num){
		$("#goods_count").val(store_num);
		return;
	}
	$("#goods_count").val(nums);
}

function addCart() {
	$("#popup_info").text("加入购物车成功...");
	$('.popup_con').fadeIn('fast', function() {
		setTimeout(function(){
			$('.popup_con').fadeOut('fast',function(){
				// location.href = 'alipay/pay/' + data.msg +"/" + price;
			});	
		}, 2000)
	});
}
</script>
</body>
</html>
